<template>
    <div class="m-products-list">
        <dl>
            <dd v-for="item in nav" :key="item.name" :class="[item.name,item.active?'s-nav-active':'']" @click="navSelect(item.name)">
                {{ item.txt }}
            </dd>
        </dl>
        <ul>
            <Item  @mouseover.native="over(item.location)" v-for="(item,idx) in lists" :key="idx" :meta="item"/>
        </ul>
    </div>
</template>

<script>
import Item from './product.vue'
import axios from 'axios'
export default {
    components: {
        Item
    },
    props: {
        list: {
            type: Array,
            default() {
                return []
            }
        }
    },
    mounted() {
        this.lists = this.list
    },
    data() {
        return {
            nav: [{
                name: 's-default',
                txt: '智能排序',
                active: true
            }, {
                name: 's-price',
                txt: '价格最低',
                active: false
            }, {
                name: 's-visit',
                txt: '人气最高',
                active: false
            }, {
                name: 's-comment',
                txt: '评价最高',
                active: false
            }],
            lists: [],
            location: ''
        }
    },
    methods:{
        navSelect(type) {
            if (type === 's-visit') {
                this.nav[0].active = false
                this.nav[1].active = false
                this.nav[2].active = true
                this.nav[3].active = false
                let a = this.list.sort((a,b) => {
                    return b.rate - a.rate
                })
                this.lists = a
            }
            if (type === 's-price') {
                this.nav[0].active = false
                this.nav[1].active = true
                this.nav[2].active = false
                this.nav[3].active = false
            }
            if (type === 's-comment') {
                this.nav[0].active = false
                this.nav[1].active = false
                this.nav[2].active = false
                this.nav[3].active = true
                let b = this.list.sort((a,b) => {
                    return b.comment - a.comment
                })
                this.lists = b;
            }
            if (type === 's-default') {
                this.nav[0].active = true
                this.nav[1].active = false
                this.nav[2].active = false
                this.nav[3].active = false
                let c = JSON.parse(localStorage.getItem('list'))
                this.lists = c
            }
        },
        over(location) {
           this.$emit('changeLocation',location)
        }
    }
}
</script>

<style lang="scss">
    .m-products-list {
        background: #FFF;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        color: #333;
        font-size: 14px;
        padding: 11px 20px;
        font-size: 14px;
        margin-top: 10px;
        box-sizing: border-box;
        line-height: 20px;
        >dl {
            dd {
                width: 96px;
                height: 20px;
                display: inline-block;
                cursor: pointer;
                box-sizing: border-box;
                text-align: center;
                &.s-nav-active {
                    color: #31BCAD;
                }
            }
            padding-bottom: 2px;
            .s-price {
                position: relative;
                &:before,
                &:after {
                    content: ' ';
                    position: absolute;
                    right: 8px;
                    top: 0;
                    width: 0;
                    height: 0;
                    border: 4px solid transparent;
                    border-bottom-color: #ddd;
                }
                &:after {
                    top: 12px;
                    border-bottom-color: transparent;
                    border-top-color: #ddd;
                }
            } 
        }
        ul {
            list-style: none;
            padding: 11px 0;
        }
    }
</style>


